<template>



  <div class="detail">
    <img :src="$pre + detail.img" alt="" />
    <div>名称:{{ detail.goodsname }}</div>
    <div v-if="detail.price">价格:{{ detail.price }}</div>
    <div v-html="detail.description"></div> 
    <!-- <button @click="isshow = true">加入购物车</button> -->
  <router-link to="/index/shop">前往购物车</router-link>
    <!-- 实现蒙版 -->
    <!-- <v-picker
      v-if="isshow"
      @click="isshow"
      :detail="detail"
      @hide="isshow = false"
    ></v-picker> -->
 
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="5" @click="$router.push('/index/shop')"/>
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="isshow = true"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>

    <!-- 弹出层 -->
    <van-popup v-model="isshow" position="bottom" :style="{ height: '30%' }">
        <v-picker  :detail="detail"></v-picker>
    </van-popup>
  </div>
</template>
<script>
import vPicker from "./components/vPicker.vue";
import axios from "axios";
import { Sku } from 'vant';
export default {
  components: {
    vPicker,
  },
  data() {
    return {
      detail: {},
      isshow: false,
    };
  },
  methods: {},
  mounted() {
    axios({
      url: "/api/getgoodsinfo",
      method: "get",
      params: {
        // 获取由list带过来的id 8080/#/detail/3
        id: this.$route.params.id,
      },
    }).then((res) => {
      console.log(res);
      this.detail = res.data.list[0];
      // 后端返回来的数据，和我们需要的数据不一样，先处理成我们需要的格式
      
      //str.split("分割标志"[,length])作用：将字符串按特定标识分割成数组

      this.detail.specsattr = this.detail.specsattr.split(",");
    });
  },
};
</script>

<style scoped>
img {
  width: 100vw;
}
</style>